<template>
	<!--  :class="status ? 'count-box-light' : 'count-box-gray'" -->
	<view class="count-box">
		<view class="count-less count-pub" @tap.stop="less" @longpress='longpressLess' @touchend="handletouchend">
			<image src="https://www.kmdj2018.com/Uploads/zfb/jian.png" mode="aspectFit" style="width:42rpx;
			height: 42rpx;margin-top: -2px;"></image>
		</view>
		<view class="count-add count-pub" @tap.stop="add" @longpress='longpressAdd' @touchend="handletouchend">
			<image src="https://www.kmdj2018.com/Uploads/zfb/jia.png" mode="aspectFit" style="width:42rpx;
			height: 42rpx;margin-top: -2px;"></image>
		</view>
		<input type="number" v-model="myValue" @focus="onFocus" @blur="onBlue" class="count-input"
			style="opacity: 0;" />
		<text :class="iStype?'count-input heiCla':'count-input heiClaa'">{{myValue}}{{text==1?'期':''}}</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myValue: 0,
				status: false,
				iStype: false,
				timer: null
			}
		},
		props: {
			// 计数器中的值
			value: {
				type: Number,
				default: 0
			},
			max: {
				type: Number,
				default: 10000
			},
			min: {
				type: Number,
				default: 0
			},
			// 点击当前数据的索引
			index: {
				type: Number
			},
			delayed: {
				type: Number,
				default: 200
			},
			text: {
				type: Number,
				default: 1
			}
		},
		created() {
			this.myValue = this.value
			this.init()
			// console.log("运行了")
		},
		watch: {
			value(val) {
				this.myValue = val
			}
		},
		methods: {
			init() {
				let port = uni.getSystemInfoSync().platform
				switch (port) {
					case 'android':
						console.log('运行Android上', port); //android
						this.iStype = false
						break;
					case 'ios':
						console.log('运行iOS上', port);
						this.iStype = true
						break;
					default:
						console.log('运行在开发者工具上'); //devtools
						break;
				}
			},
			onBlue() {
				if (+this.myValue >= this.max) {
					this.myValue = this.max
					this.status = false
				} else if (+this.myValue <= this.min) {
					this.myValue = this.min
					this.status = false
				} else {
					this.status = true
					this.myValue = +this.myValue
				}
				if (!isNaN(this.myValue)) {
					this.$emit('handleCount', this.myValue, this.index)
				} else {
					this.$emit('handleCount', 0, this.index)
				}

			},
			onFocus() {
				this.status = true
			},
			add() {
				this.addPublick()
			},
			addPublick() {
				if (this.myValue >= this.max) {
					this.status = false
					this.myValue = this.max
					clearInterval(this.timer)
				} else {
					this.status = true
					this.myValue++
				}
				this.$emit('handleCount', this.myValue, this.index)
			},
			longpressAdd() {
				this.timer = setInterval(() => {
					this.addPublick()
				}, this.delayed)
			},
			less() {
				this.lessPublick()
			},
			lessPublick() {
				if (this.myValue <= this.min) {
					clearInterval(this.timer)
					this.status = false
					this.myValue = this.min
				} else {
					this.status = true
					this.myValue--
				}
				this.$emit('handleCount', this.myValue, this.index)
			},
			longpressLess() {
				this.timer = setInterval(() => {
					this.lessPublick()
				}, this.delayed)
			},
			handletouchend() {
				clearInterval(this.timer)
			}
		}
	}
</script>
<style>
	.gray {
		background: #F7BC1C;
		color: #555555;
	}

	.light {
		background: #f5f7fa;
		color: #C8C7CC;
	}

	.count-box {
		position: relative;
		width: 160rpx;
		border-radius: 5px;
		/* z-index: 1; */
		transition: all .3s;
	}

	.count-box-light {
		border: 1px solid #add4ff;
	}

	.count-box-gray {
		border: 1px solid #e4e4e4;
	}

	.count-pub {
		position: absolute;
		top: 50%;
		transform: translate(0, -50%);
		width: 40rpx;
		height: 100%;
		text-align: center;
		font-size: 20px;
	}

	.count-less {
		left: 3rpx;
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
	}

	.count-add {
		right: 3rpx;
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
	}

	.count-input {
		width: 74rpx;
		height: 100%;
		position: absolute;
		top: -3rpx;
		left: 50%;
		transform: translate(-50%, 0);
		padding: 6rpx 10rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		color: #333333;
		text-align: center;
		border-top: 1rpx solid #e4e4e4;
		border-bottom: 1rpx solid #e4e4e4;
	}

	.heiClaa {
		height: 42rpx;
	}
	.heiCla {
		height: 40rpx;
	}
</style>
